import React from 'react';
import numeral from 'numeral';
import ChartCard from '@/components/ChartCard';
import { Divider } from 'antd';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
type PropField = {
  title: React.ReactNode;
  curr_val: number;
  qytq_val: number;
  height: number;
  loading: boolean;
};
const DataChartCard: React.FC<PropField> = (props) => {
  const { curr_val, qytq_val, title, loading } = props;
  const zl = curr_val - qytq_val;
  const zf = zl / qytq_val; // 同比
  const img =
    zl > 0 ? (
      <CaretUpOutlined style={{ color: 'red' }} />
    ) : (
      <CaretDownOutlined style={{ color: 'green' }} />
    );
  return (
    <ChartCard
      bordered={false}
      loading={loading}
      title={title}
      total={numeral(curr_val).format('0,0')}
      footer={
        <>
          <span>去年同期：{numeral(qytq_val).format('0,0')}</span>
          <Divider type="vertical" />
        </>
      }
      contentHeight={props.height}
    >
      <span>
        较去年同期：{numeral(zl).format('0,0')}
        {img}
        {numeral(zf).format('0.00%')}
      </span>
    </ChartCard>
  );
};

export default DataChartCard;
